<template>
  <CollapseContainer :title="t('sys.account.basicTab')" :canExpan="false" class="overflow-x-hidden">
    <template #action>
      <span v-if="record.additionalInfo?.lastLoginTs">
        <span>{{ t('sys.account.lastLogin') }}</span>
        {{ dayjs(record.additionalInfo.lastLoginTs).format('YYYY-MM-DD HH:mm:ss') }}
      </span>
    </template>
    <ARow :gutter="24" class="mt-3">
      <ACol :span="14">
        <BasicForm @register="register">
          <template #homeDashboardHideToolbar="{ model, field }">
            <Checkbox v-model:checked="model[field]">{{ t('tb.user.form.homeDashboardHideToolbar') }}</Checkbox>
          </template>
        </BasicForm>
      </ACol>
      <ACol :span="10">
        <div class="change-avatar mt-6">
          <CropperAvatar
            :value="avatar"
            :btnText="t('sys.account.changeAvatar')"
            :btnProps="{ preIcon: 'i-ant-design:cloud-upload-outlined' }"
            @change="updateAvatar"
            :uploadApi="({ file, name, filename }) => uploadImage(file, name)"
            width="150"
          />
        </div>
      </ACol>
    </ARow>
    <div class="ml-30">
      <Button type="primary" @click="handleSubmit">
        <Icon icon="i-ant-design:check-outlined" /> {{ t('sys.account.updateBtn') }}
      </Button>
    </div>
  </CollapseContainer>
</template>
<script lang="ts" setup>
  import { computed, onMounted, ref } from 'vue';
  import { Button, Row, Col, Checkbox } from 'ant-design-vue';
  import { useI18n } from '/@/hooks/web/useI18n';
  import { useMessage } from '/@/hooks/web/useMessage';
  import { Icon } from '/@/components/Icon';
  import { BasicForm, FormSchema, useForm } from '/@/components/Form';
  import { CollapseContainer } from '/@/components/Container';
  import { CropperAvatar } from '/@/components/Cropper';
  import { UserInfo } from '/#/store';
  import { usePermission } from '/@/hooks/web/usePermission';
  import AvatarImg from '/@/assets/images/avatar.jpg';
  import { useUserStore } from '/@/store/modules/user';
  import { saveUser, userInfoApi } from '/@/api/tb/user';
  import { uploadImage } from '/@/api/tb/images';
  import dayjs from 'dayjs';
  import { Authority } from '/@/enums/authorityEnum';
  import { localeList } from '/@/settings/localeSetting';
  import { useLocale } from '/@/locales/useLocale';
  import { currentTenantDashboardList, customerDashboardList } from '/@/api/tb/dashboard';

  const { t } = useI18n();
  const { changeLocale, getLocale } = useLocale();
  const { hasPermission } = usePermission();
  const { showMessage } = useMessage();
  const avatarBase64 = ref<string>('');
  const userStore = useUserStore();
  const record = ref<UserInfo>({} as UserInfo);
  const ARow = Row;
  const ACol = Col;

  const userInfoSchemas: FormSchema[] = [
    {
      field: 'email',
      component: 'Input',
      label: t('tb.user.form.email'),
      required: true,
      colProps: { span: 18 },
      rules: [
        { required: true, message: t('tb.user.form.emailRequired') },
        { type: 'email', message: t('tb.user.form.emailRule') },
      ],
    },
    {
      label: t('tb.user.form.firstName'),
      field: 'firstName',
      component: 'Input',
      componentProps: {
        maxlength: 100,
      },
      required: true,
      colProps: { span: 18 },
    },
    {
      label: t('tb.user.form.lastName'),
      field: 'lastName',
      component: 'Input',
      componentProps: {
        maxlength: 100,
      },
      colProps: { span: 18 },
    },
    {
      label: t('tb.user.form.phone'),
      field: 'phone',
      component: 'Input',
      required: true,
      rules: [{ pattern: /^(1[3-9]\d{9}|09\d{8})$/, message: t('tb.user.form.phoneRule') }],
      colProps: { span: 18 },
    },
    // {
    //   label: t('tb.user.form.description'),
    //   field: 'additionalInfo.description',
    //   component: 'InputTextArea',
    //   colProps: { span: 18 },
    // },
    {
      label: t('tb.user.form.lang'),
      field: 'additionalInfo.lang',
      component: 'Select',
      componentProps: {
        options: localeList.map((item) => ({ label: item.text, value: item.event.toString() })),
      },
      colProps: { span: 18 },
    },
    {
      label: t('tb.user.form.unitSystem'),
      field: 'additionalInfo.unitSystem',
      component: 'Select',
      componentProps: {
        options: [
          { label: 'Auto', value: 'Auto' },
          { label: 'METRIC', value: 'METRIC' },
          { label: 'IMPERIAL', value: 'IMPERIAL' },
          { label: 'HYBRID', value: 'HYBRID' },
        ],
      },
      colProps: { span: 18 },
    },
    {
      label: t('tb.user.form.homeDashboard'),
      field: 'additionalInfo.homeDashboardId',
      component: 'Select',
      componentProps: {
        immediate: true,
        resultField: 'data',
        allowClear: true,
        params: { pageSize: 50, page: 0, sortProperty: 'title', sortOrder: 'ASC' },
        mapFn: (item) => {
          return { label: item.title, value: item.id.id };
        },
        api: (args: any) => {
          if (hasPermission(Authority.TENANT_ADMIN)) {
            return currentTenantDashboardList(args);
          }
          if (hasPermission(Authority.CUSTOMER_USER)) {
            return customerDashboardList(args, userStore.getUserInfo.customerId.id);
          }
          return [];
        },
      },
      ifShow: hasPermission(Authority.TENANT_ADMIN) || hasPermission(Authority.CUSTOMER_USER),
      colProps: { lg: 14, md: 14 },
    },
    {
      field: 'additionalInfo.homeDashboardHideToolbar',
      slot: 'homeDashboardHideToolbar',
      component: 'Checkbox',
      colProps: { lg: 8, md: 8 },
      ifShow: hasPermission(Authority.TENANT_ADMIN) || hasPermission(Authority.CUSTOMER_USER),
    },
  ];

  const [register, { setFieldsValue, validate }] = useForm({
    labelWidth: 120,
    schemas: userInfoSchemas,
    showActionButtonGroup: false,
  });

  onMounted(async () => {
    record.value = await userInfoApi();
    setFieldsValue(record.value);
  });

  const avatar = computed(() => {
    const { avatarUrl } = userStore.getUserInfo.additionalInfo;
    return avatarUrl || AvatarImg;
  });

  function updateAvatar(parmas: any) {
    const { source, data } = parmas;
    if (data?.publicLink) {
      console.log(data.publicLink);
      record.value.additionalInfo = { ...record.value.additionalInfo, avatarUrl: data.publicLink };
      avatarBase64.value = source;
    }
  }

  async function handleSubmit() {
    try {
      const data = await validate();
      record.value.email = data.email;
      record.value.firstName = data.firstName;
      record.value.lastName = data.lastName;
      record.value.phone = data.phone;
      record.value.additionalInfo = {
        ...record.value.additionalInfo,
        lang: data.additionalInfo.lang,
        unitSystem: data.additionalInfo.unitSystem,
        homeDashboardId: data.additionalInfo.homeDashboardId,
        homeDashboardHideToolbar: data.additionalInfo.homeDashboardHideToolbar,
      };
      // console.log('submit', data);
      const res = await saveUser(record.value);
      const userInfoRes = await userInfoApi();

      userStore.setUserInfo(userInfoRes);
      // 如果修改了语言，则重新加载页面
      if (data.additionalInfo?.lang && data.additionalInfo.lang !== getLocale.value) {
        await changeLocale(data.additionalInfo.lang);
        location.reload();
      }
      showMessage(t('sys.account.updateUserInfoSuccess'));
    } catch (error: any) {
      if (error && error.errorFields) {
        showMessage(error.message || t('common.validateError'));
      }
      console.log('error', error);
    }
  }
</script>
<style lang="less">
  .change-avatar {
    img {
      display: block;
      margin-bottom: 15px;
      border-radius: 50%;
    }
  }
</style>
